<template>
	<view class="content" style="">
		<view v-for="i in 15" class="list-item" style="">
			<view  class="item-top" style="">
			    <!-- 图片部分 -->
			    <view class="item-pic" style="">
			        <image style="height: 100%; width: 100%;" src="http://120.234.27.130:9010/uploads/images/ddc.png" mode="aspectFit"></image>
			    </view>
			    
			    <!-- 文字部分 -->
			    <view class="item-content" >
					<view >
					    雅迪
					</view>
			        <view class="fuwu">
			            服务到期日：2026-05-15
			        </view>
			        <view style="display: flex;">
						<text>立即续费</text>
			            <i class="iconfont" style="font-size: 25rpx; color: #aaaaaa;margin: auto 0;">&#xe633;</i>
			        </view>
			    </view>
			</view>
			
		</view>
		

	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
.content{
	padding: 20rpx;background-color: #f4f4f4;height: 100vh;overflow: scroll;
	.list-item{
		border: 1rpx solid #dadada;background-color: #fff;border-radius: 20rpx;
		padding: 2rpx;box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);margin-top: 20rpx;
		.item-top{
			display: flex; justify-content: space-between; border-bottom: 1rpx solid #dadada; padding: 20rpx;
			.item-pic{
				height: 120rpx; width: 40%; display: flex; justify-content: center; align-items: center;
			}
			.item-content{
				width: 60%;
				view{
					 margin: 5rpx;
				}
			}
		}
	}
}
</style>
